import IconDouyin from '@/components/icon/IconDouyin';
import { selectMonitorVideoRecord } from '@/services/api/api-monitor-video';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { ProCard, ProFormRadio, ProList } from '@ant-design/pro-components';
import { DrawerForm } from '@ant-design/pro-form';
import { Col, Descriptions, Row, Select, Space, Spin, Tag, Typography, message } from 'antd';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
interface DetailMonitorVideoProps {
  data: MonitorVideoData.VideoRecordPage;
  onRefurbish: () => void;
}

const DetailMonitorVideo: React.FC<DetailMonitorVideoProps> = ({ data, onRefurbish }) => {
  const access = useAccess();
  const videoRef = useRef(null);
  const [loading, setLoading] = useState(false);

  const [details, setDetailDataState] = useState<MonitorVideoData.VideoRecordSelect>();

  const [sensitives, setSensitives] = useState([])


  return (
    <DrawerForm
      key="details_details_drawer_form"
      title={details?.content}
      drawerProps={{
        destroyOnClose: true,
        width: 900,
      }}
      trigger={
        <a>
          <Tag
            icon={data?.isViolation == 0 ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
            color={data?.isViolation == 0 ? 'success' : 'error'}
          >
            {data?.isViolation == 0 ? '正常' : '风险'}
          </Tag>
          {data?.content}
        </a>
      }
      onOpenChange={async (visible) => {
        if (visible) {
          console.log('=================', data);

          const response = await selectMonitorVideoRecord({ id: data.id });

          if (response.code == 0) {
            setDetailDataState(response.data);
            setSensitives(response.data?.sensitives)
          }
        } else {
        }
      }}
      submitter={false}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        {details !== undefined && (
          <div style={{ overflow: 'hidden' }}>
            <Row gutter={16}>
              <Col span={10}>
                {/* <div style={{ display: 'flex', marginBottom: 10 }}>
                  <IconDouyin width={20} height={20} />
                  <div style={{ alignItems: 'center', marginLeft: 10 }}> {details?.sourceName}</div>
                </div> */}
                <video
                  ref={videoRef}
                  hidden={loading}
                  style={{
                    width: '100%',
                    height: 500,
                  }}
                  controls
                  src={details?.sourceObjectUrl}
                // src='https://s33.aconvert.com/convert/p3r68-cdx67/9dmah-sj11g.mp4'
                />
                <Descriptions>
                  <Descriptions.Item label="文章标题">{details?.content}</Descriptions.Item>
                </Descriptions>

                <Descriptions>
                  <Descriptions.Item label="发布账号">
                    <div style={{ display: 'flex', marginBottom: 10 }}>
                      <IconDouyin width={20} height={20} />
                      <div style={{ alignItems: 'center', marginLeft: 10 }}> {details?.sourceName}</div>
                    </div>
                  </Descriptions.Item>
                </Descriptions>
                <Descriptions>
                  <Descriptions.Item label="发布单位">{details?.sourceOrganizationName}</Descriptions.Item>
                </Descriptions>
                <Descriptions>
                  <Descriptions.Item label="发布时间">{details?.createdTime}</Descriptions.Item>
                </Descriptions>
                <Descriptions>
                  <Descriptions.Item label="原文链接"><a href={details?.sourceUrl} target="_blank">{details?.sourceUrl} </a></Descriptions.Item>
                </Descriptions>
              </Col>
              <Col span={14} style={{
                maxHeight: '650px', overflow: "auto", overflowX: 'hidden',
                overflowY: 'scroll',
                marginTop: 10,
                scrollbarWidth: 'none',
              }} >
                <ProFormRadio.Group
                  name="levelId"
                  radioType="button"
                  initialValue={'all'}
                  options={[
                    { label: '全部', value: 'all' },
                    { label: '人像', value: 'p' },
                    { label: '音频', value: 'a' },
                  ]}
                  fieldProps={{
                    onChange: (e) => {
                      let value = e.target.value
                      if (value === "p") {
                        const list = details?.sensitives && details?.sensitives.filter((item) => item?.type === 'p')
                        setSensitives(list)
                      }
                      else if (value === "a") {
                        const list = details?.sensitives && details?.sensitives.filter((item) => item?.type === 'a')
                        setSensitives(list)
                      }
                      else {
                        setSensitives(details.sensitives)
                      }
                    },
                  }}
                />
                <ProList<any>

                  ghost
                  dataSource={sensitives}
                  pagination={false}
                  itemLayout="vertical"
                  onItem={(record: any) => {
                    return {
                      onClick: () => {
                        if (videoRef) {
                          // 假设record.appearTime是一个时间字符串，比如"00:50"
                          let convertedTime = moment(record.appearTime, "MM:ss").format("HH:mm:ss");
                          let time = moment(convertedTime, "HH:mm:ss");

                          let timestamp = time.diff(moment().startOf('day'), 'seconds');

                          videoRef.current.currentTime = timestamp;

                          let duration = moment.duration(timestamp, 'seconds');
                          let hours = duration.hours();
                          let minutes = duration.minutes();
                          let seconds = duration.seconds();

                          message.success(
                            `跳转到 ${moment()
                              .set('hour', hours)
                              .set('minute', minutes)
                              .set('second', seconds)
                              .format('HH:mm:ss')}`,
                          );
                        }
                      },
                    };
                  }}
                  metas={{
                    title: {
                      render: (dom: React.ReactNode,
                        item: any,
                        index: number,
                        action,) => (
                        item.person?.name ? <div style={{ fontSize: 15 }}>{item.person?.name}</div> : <div style={{ fontSize: 15 }}>音频链接</div>
                      ),
                    },
                    extra: {
                      render: (dom: React.ReactNode,
                        item: any,
                        index: number,
                        action) => (
                        item.person?.pictureUrl ? <img
                          width={152}
                          height={100}
                          alt="图片"
                          src={item.person?.pictureUrl}
                        /> : <></>
                      ),
                    },
                    description: {
                      render: (
                        dom: React.ReactNode,
                        item: any,
                        index: number,
                        action,
                      ) => {
                        let convertedTime = moment(item.appearTime, "MM:ss").format("HH:mm:ss");
                        let time = moment(convertedTime, "HH:mm:ss");
                        return <>
                          <Space size={1}>
                            {item.person?.similarity && <Tag >对比率：{item.person?.similarity}</Tag>}
                          </Space>
                          <Tag>
                            定位：
                            {moment(time).format('HH:mm:ss')}
                          </Tag>
                        </>
                      }

                    },
                    content: {
                      render: (
                        dom: React.ReactNode,
                        item: any,
                        index: number,
                        action,
                      ) => {
                        return (
                          <Typography >
                            <Typography.Text type="secondary">
                              {item.person?.position}
                              {item.audio?.content}
                            </Typography.Text>
                          </Typography>
                        );
                      },
                    },
                  }}
                />
              </Col>
            </Row>

          </div>
        )}
      </Spin>
    </DrawerForm>
  );
};

export default DetailMonitorVideo;
